<template>
  <!-- <n-spin :show='loading' style='width: 100%; height: 100%'> -->
    <div class='iframe-wrapper'>
      <iframe :src='iframeSrc' ref='frameRef' class="iframe"></iframe>
    </div>
  <!-- </n-spin> -->
</template>

<script lang="ts" setup>
  import { ref, unref, nextTick, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { getAppEnvConfig } from '@/utils/env'

  const currentRoute = useRoute()
  const loading = ref(false)
  const frameRef = ref<HTMLFrameElement | null>(null)
  const iframeSrc = ref<string>('')
  const urlPrefix = getAppEnvConfig().VITE_API_URL_PREFIX

  if(unref(currentRoute.meta)?.iframeSrc) {
    iframeSrc.value = unref(currentRoute.meta)?.iframeSrc as string
  }

  function hideLoading() {
    loading.value = false
  }

  function init() {
    // nextTick(() => {
      const iframe = unref(frameRef)
      console.log('frameRef', iframe)

      const _frame = iframe as any
      if(_frame.attachEvent) {
        _frame.attachEvent('onload', () => {
          hideLoading()
        })
      } else {
        iframe.onload = () => {
          hideLoading()
        }
      }
    // })
  }

  onMounted(() => {
    loading.value = true
    init()
    console.log('urlPrefix', urlPrefix)
  })


</script>

<style lang='stylus' scoped>
  .iframe-wrapper
    height 100%

    .iframe
      width 100%
      height 100%
      overflow hidden
      border 0
</style>
